<!--
 * @Description: 发放梯度奖励审核弹窗
 * @Author: liyujie
 * @Date: 2021/09/09
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/09/09
-->
<template>
    <section class="wrapper">
        <el-dialog
            :title="type === 1 ? '审核反馈' : '查看'"
            width="800px"
            :visible.sync="dialogVisible"
            @close="beforeClose"
        >
            <div class="dialog-content">
                <!--步骤条-->
                <div class="step-wrapper">
                    <!--审核-->
                    <div
                        class="step-view"
                        v-if="type === 1"
                    >
                        <div class="step-item">
                            <div
                                class="step-icon"
                                v-if="step === 1"
                            >1</div>
                            <i
                                class="el-icon-success"
                                v-else
                            />
                            <div
                                class="step-tips"
                                :style="{color: step === 1 ? '' : '#2FBDB3'}"
                            >
                                {{ step === 1 ? '反馈待审核' : '反馈审核：通过' }}
                            </div>
                        </div>
                        <div class="step-line"/>
                        <div class="step-item">
                            <div class="step-icon">2</div>
                            <div class="step-tips">
                                奖励待处理
                            </div>
                        </div>
                    </div>
                    <!--查看-->
                    <div
                        class="step-view"
                        v-else
                    >
                        <div class="step-item">
                            <i
                                :class="status === 1 ? 'el-icon-success' : 'el-icon-error'"
                                :style="{color: status === 1 ? '#2FBDB3' : '#F95B56'}"
                            />
                            <div
                                class="step-tips"
                                :style="{color: status === 1 ? '#2FBDB3' : '#F95B56'}"
                            >
                                反馈审核：{{ status === 1 ? '通过' : '未通过' }}
                            </div>
                        </div>
                        <div class="step-line"/>
                        <div class="step-item">
                            <i
                                :class="status === 1 ? 'el-icon-success' : 'el-icon-error'"
                                :style="{color: status === 1 ? '#2FBDB3' : '#F95B56'}"
                            />
                            <div
                                class="step-tips"
                                :style="{color: status === 1 ? '#2FBDB3' : '#F95B56'}"
                            >
                                {{ status === 1 ? '奖励已发放' : '奖励未发放' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="base-info">
                    <div class="base-info-title">
                        <span v-if="step === 1">
                            任务标题：{{ formData.task_title }}
                        </span>
                        <span v-else>奖励发放对象</span>
                    </div>
                    <div class="base-info-form">
                        <div class="base-info-form-item">
                            <div class="base-info-form-item__label">
                                {{ step === 1 ? '上传学生昵称：' : '用户昵称：' }}
                            </div>
                            <div class="base-info-form-item__content">
                                {{ formData.true_name }}
                            </div>
                        </div>
                        <div class="base-info-form-item">
                            <div class="base-info-form-item__label">
                                {{ step === 1 ? '上传学生电话：' : '联系电话：' }}
                            </div>
                            <div class="base-info-form-item__content">
                                {{ formData.phone }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="content-table"
                    v-if="step === 1"
                >
                    <custom-form-data :data="formData.submit_config"/>
                </div>
                <div
                    class="content-table"
                    v-if="step === 2"
                >
                    <div class="table-title">
                        选择发放奖励的梯度
                    </div>
                    <el-table
                        v-if="formData.award_config_data"
                        :data="formData.award_config_data.award_item_list"
                        max-height="240"
                        @row-click="handleRadioChange"
                    >
                        <el-table-column
                            width="50"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <el-radio
                                    v-model="selectId"
                                    :label="scope.row.id"
                                    @change="handleRadioChange(scope.row)"
                                >&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="梯度等级"
                            align="center"
                        >
                            <template slot-scope="scope">
                                梯度{{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="要求数量"
                            prop="requireSubmitCount"
                            align="center"
                        />
                        <el-table-column
                            label="奖励类型"
                            align="center"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.type === 1 ? '现金奖励' : '0元购学生券' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="奖励金额/数量"
                            align="center"
                            width="130"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.total_num }}{{ scope.row.type === 1 ? '元' : '张' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="用户端显示金额"
                            align="center"
                            width="130"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.type === 1">{{ scope.row.num }}元</div>
                                <div v-else>--</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="dialog-footer">
                <template v-if="type === 1">
                    <el-button
                        size="medium"
                        style="width: 120px; margin-right: 32px;"
                        v-if="step === 1"
                        @click="handleConfirm(-1)"
                    >
                        不通过
                    </el-button>
                    <el-button
                        size="medium"
                        style="width: 120px"
                        type="primary"
                        v-if="step === 1"
                        @click="step = 2"
                    >
                        通过
                    </el-button>
                    <el-button
                        size="medium"
                        style="width: 120px;margin-right: 32px;"
                        v-if="step === 2"
                        @click="dialogVisible = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="medium"
                        style="width: 120px"
                        type="primary"
                        v-if="step === 2"
                        @click="handleConfirm(1)"
                    >
                        确定
                    </el-button>
                </template>
                <template v-else>
                    <el-button
                        size="medium"
                        style="width: 120px;"
                        @click="dialogVisible = false"
                    >
                        取消
                    </el-button>
                </template>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import Vue from "vue";
import CustomFormData from "@/components/common/custom-form-data";

const Dialog = {
    name: "GrantGradientAwardVerifyDialog",
    props: {
        formData: {
            type: Object,
            required: true
        },
        // 1审核 2查看
        type: {
            type: Number,
            required: true
        },
        status: {
            type: Number,
            required: true
        }
    },
    components: {CustomFormData},
    data() {
        return {
            step: 1,
            dialogVisible: false,
            selectId: '',
        };
    },
    methods: {
        /**
         * 点击radio
         * @param row
         */
        handleRadioChange(row) {
            this.selectId = row.id;
        },

        /**
         * 关闭弹窗
         */
        close() {
            this.dialogVisible = false;
        },

        /**
         * 弹窗关闭前
         */
        beforeClose() {
            this.selectId = '';
            this.step = 1;
            this.$emit('close');
        },

        /**
         * 确定
         */
        async handleConfirm(action) {
            if(action === 1) {
                if(!this.selectId) {
                    this.$message.warning('请选择奖励梯度');
                    return;
                }
                this.handleVerify(this.formData.apply_no, action, '', this.selectId);
            } else {
                let reason = await this.$zdPrompt({
                    title: '不通过原因',
                    message: '不通过原因',
                    placeholder: '请输入不通过原因…'
                });

                if(reason) {
                    this.handleVerify(this.formData.apply_no, action, reason);
                }
            }

        },

        /**
         * 审核
         */
        handleVerify(apply_no, verify_status, verify_fail_reason, sub_ids) {
            let params = {
                apply_no,
                verify_status,
                verify_fail_reason,
                sub_ids
            };

            this.$post('/student/task_stuagent_student_task%5Ccomplete_task_set_award', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.$emit('confirm', true);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};

export default Dialog;

const verifyDialog = function (config) {
    return new Promise((resolve) => {
        const DialogConstructor = Vue.extend(Dialog);
        const instance = new DialogConstructor({
            propsData: config,
        }).$mount();

        instance.$on("close", () => {
            setTimeout(() => {
                document.body.removeChild(instance.$el);
                instance.$destroy();
            }, 300);
            resolve(false);
        });
        instance.$on("confirm", (data) => {
            instance.close();
            resolve(data);
        });
        document.body.appendChild(instance.$el);
        instance.dialogVisible = true;
    });
};

export { verifyDialog };

</script>

<style scoped lang="less">
.wrapper {
    .dialog-content {
        padding: 32px 56px 0;
        max-height: 500px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0;
        }
        .step-wrapper {
            padding: 0 55px;
            display: flex;
            justify-content: center;
            margin-bottom: 32px;
            .step-view {
                display: flex;
                .step-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .step-icon {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        border: 1px solid #333333;
                        font-size: 12px;
                        font-family: SFCompactDisplay-Medium, SFCompactDisplay;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .step-tips {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #F99456;
                        margin-top: 10px;
                    }
                    .el-icon-success {
                        color: #2FBDB3;
                        font-size: 20px;
                    }
                    .el-icon-error {
                        font-size: 20px;
                    }
                }
                .step-line {
                    width: 296px;
                    height: 2px;
                    background: #E9E9E9;
                    border-radius: 1px;
                    margin-top: 9px;
                }
            }
        }
        .base-info {
            border-bottom: 1px solid #EBEEF5;
            margin-bottom: 24px;
            &-title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }

            &-form {
                display: flex;

                &-item {
                    display: flex;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    margin: 16px 32px 16px 0;

                    &__label {
                        color: #888888;
                    }

                    &__content {
                        color: #333333;
                    }
                }
            }
        }
        .content-table {
            margin-bottom: 27px;
            .table-title {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-bottom: 12px;
            }
            .el-table {
                background: #FBFBFB;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                th {
                    background: #f2f2f2!important;
                    font-size: 14px!important;
                    font-family: PingFangSC-Medium, PingFang SC!important;
                    font-weight: 500!important;
                    color: #333333!important;
                    height: 44px!important;
                }
            }
        }
    }
    .dialog-footer {
        position: absolute;
        width: 100%;
        height: 68px;
        background: #FFFFFF;
        border-radius: 0 0 4px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #eee;
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 0;
        position: relative;
    }

    /deep/ .el-table__fixed-right {
        right: 6px !important;
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>
